<template>
  <div>

    <el-dialog v-dialogDrag :title="$t('roleadd.addrole')" :visible.sync="dialogFormVisible" width="30%"
      @close="closereg">
      <el-tabs v-model="activeTab" type="border-card" style="height: 370px; overflow: auto">
        <el-tab-pane name="tab1" label="用户信息">
          <el-form ref="roleadd" :model="roleadd" :rules="rules" label-width="25%">
            <el-form-item :label="$t('roleadd.rolename')" prop="rolename">
              <el-input v-model="roleadd.rolename" autocomplete="off" />
            </el-form-item>
            <el-form-item :label="$t('roleadd.roledescribe')" prop="roledescribe">
              <el-input v-model="roleadd.roledescribe" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="tab2" label="角色权限">
          <el-tree ref="treemenu" node-key="id" show-checkbox :data="treedata" :props="defaultProps"
            default-expand-all />
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="onSubmite('roleadd')">{{ $t('roleadd.confirm') }}</el-button>
        <el-button size="mini" @click="dialogFormVisible = false">{{ $t('roleadd.cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    createrole
  } from '@/api/role'
  import {
    getTreepermissions
  } from '@/api/permissions'
  export default {
    name: 'Roleadd',
    data() {
      return {
        rules: {
          rolename: [{
            required: true,
            message: 'Role name cannot be empty'
          }]
        },
        dialogFormVisible: false,
        roleadd: {
          rolename: '',
          roledescribe: '',
          rolepermissionsids: []
        },
        treedata: [],
        defaultProps: {
          children: 'children',
          label: 'permissionsname'
        },
        activeTab: 'tab1'
      }
    },
    methods: {
      async getTreepermissions() {
        var {
          data
        } = await getTreepermissions()
        this.treedata = data
      },
      handlenodecheck() {
        this.roleadd.rolepermissionsids = this.$refs.treemenu.getCheckedKeys()
      },
      async onshow() {
        await this.getTreepermissions()
        this.dialogFormVisible = true
      },
      closereg() {
        this.dialogFormVisible = false
        this.clear()
      },
      clear() {
        this.activeTab = 'tab1'
        this.$refs['roleadd'].resetFields()
      },
      onSubmite(formData) {
        this.$refs[formData].validate(async (valid) => {
          if (valid) {
            this.handlenodecheck()
            var res = await createrole(this.roleadd)
            if (res.code === 200) {
              this.$emit('callAdd')
              this.$message({
                message: 'Success',
                type: 'success'
              })
              this.dialogFormVisible = false
            }
          }
        })
      }
    }
  }
</script>
<style scoped>

</style>
